<script setup lang="ts">
defineOptions({
  name: "isolateDialog"
});

import { ref, reactive, computed, withDefaults } from "vue";
import { PxScrollbar, PxMessage, PxMessageBox } from "px-ui";

const emits = defineEmits(["success"]);
const dialogVisible = defineModel({ type: Boolean, default: false });
const dialogVisible2 = ref<boolean>(false);

// type  0 隔离   1 解隔离
const props = withDefaults(defineProps<{ type: 0 | 1; list: Array<any> }>(), { type: 0, list: () => [] });

const title = computed(() => {
  return dialogVisible2.value ? `${props.type ? "解" : ""}隔离进度` : `一键${props.type ? "解" : ""}隔离确认`;
});

const detector = ref<string>("");
const progress = ref<string>("");
const percentage = ref<number>(0);

const initProgress = () => {
  const total = props.list?.length;
  const detectors = props.list.map(item => item?.detectorCode);
  let index = 0;
  const timer = setInterval(() => {
    if (index < total) {
      detector.value = detectors[index];
      progress.value = `${index + 1}/${total}`;
      percentage.value = ((index + 1) * 100) / total;
      index++;
    } else {
      clearInterval(timer);
      setTimeout(() => {
        dialogVisible.value = false;
        PxMessage.success(`${props.type ? "解" : ""}隔离成功！`);
        emits("success");
      }, 200);
    }
  }, 100);
};

const dosomething = () => {
  dialogVisible2.value = true;
  setTimeout(() => {
    initProgress();
  }, 20);
};
</script>

<template>
  <px-dialog v-model="dialogVisible" :title="title" width="400px">
    <div v-if="dialogVisible2" class="progress">
      <div class="progress-label">{{ percentage === 100 ? "全部处理完成" : `正在处理：${detector}` }}</div>
      <div class="progress-ui">
        <px-progress :percentage="percentage" :show-text="false" status="success" :stroke-width="12" striped striped-flow />
      </div>
      <div class="progress-data">进度：{{ progress }}</div>
    </div>
    <div v-else>
      <div class="text">{{ `是否确认对侦测器进行${type ? "解" : ""}隔离操作？` }}</div>
      <div class="text">{{ `请严格按照SOP验证流程确认！` }}</div>
    </div>
    <template v-if="!dialogVisible2" #footer>
      <span class="dialog-footer">
        <px-button type="success" @click="dosomething"> 执行 </px-button>
        <px-button type="info" @click="dialogVisible = false">取消</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<style lang="scss" scoped>
.text {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  margin-bottom: 16px;
  line-height: 1;
  color: #f87171;
  text-indent: 12px;
  background-color: #fef0f0;
  border: 1px solid #f87171;
  border-radius: 4px;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.progress {
  .progress-label {
    color: #555;
  }

  .progress-ui {
    margin: 16px 0;
  }

  .progress-data {
    color: #555;
    text-align: center;
  }
}
</style>
